<template>
  <n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="120">
    <n-form-item label="名称" path="name">
      <n-input v-model:value="model.name" placeholder="任务名称" />
    </n-form-item>
    <n-form-item label="方向" path="direction">
      <n-select v-model:value="model.direction" :options="dirOptions" />
    </n-form-item>

    <template v-if="model.direction==='KAFKA_TO_RABBIT'">
      <n-divider title-placement="left">Kafka 源</n-divider>
      <n-form-item label="bootstrap" path="kafkaSourceBootstrap">
        <n-input v-model:value="model.kafkaSourceBootstrap" placeholder="192.168.168.23:9092"/>
      </n-form-item>
      <n-form-item label="topic" path="kafkaSourceTopic">
        <n-input v-model:value="model.kafkaSourceTopic" placeholder="test_topic"/>
      </n-form-item>
      <n-form-item label="group" path="kafkaSourceGroup">
        <n-input v-model:value="model.kafkaSourceGroup" placeholder="consumer-group"/>
      </n-form-item>
      <n-form-item label="offset reset" path="kafkaSourceOffsetReset">
        <n-select v-model:value="model.kafkaSourceOffsetReset" :options="offsetOptions"/>
      </n-form-item>

      <n-divider title-placement="left">Rabbit 目标</n-divider>
      <n-form-item label="host" path="rabbitTargetHost">
        <n-input v-model:value="model.rabbitTargetHost" placeholder="192.168.168.23"/>
      </n-form-item>
      <n-form-item label="port" path="rabbitTargetPort">
        <n-input-number v-model:value="model.rabbitTargetPort" :min="1" placeholder="5672"/>
      </n-form-item>
      <n-form-item label="vhost" path="rabbitTargetVhost">
        <n-input v-model:value="model.rabbitTargetVhost" placeholder="/"/>
      </n-form-item>
      <n-form-item label="username" path="rabbitTargetUsername">
        <n-input v-model:value="model.rabbitTargetUsername" placeholder="guest"/>
      </n-form-item>
      <n-form-item label="password" path="rabbitTargetPassword">
        <n-input v-model:value="model.rabbitTargetPassword" type="password" placeholder="guest"/>
      </n-form-item>
      <n-form-item label="exchange" path="rabbitTargetExchange">
        <n-input v-model:value="model.rabbitTargetExchange" placeholder="留空使用默认"/>
      </n-form-item>
      <n-form-item label="routingKey" path="rabbitTargetRoutingKey">
        <n-input v-model:value="model.rabbitTargetRoutingKey" placeholder="队列名"/>
      </n-form-item>
    </template>

    <template v-else>
      <n-divider title-placement="left">Rabbit 源</n-divider>
      <n-form-item label="host" path="rabbitSourceHost">
        <n-input v-model:value="model.rabbitSourceHost" placeholder="192.168.168.23"/>
      </n-form-item>
      <n-form-item label="port" path="rabbitSourcePort">
        <n-input-number v-model:value="model.rabbitSourcePort" :min="1" placeholder="5672"/>
      </n-form-item>
      <n-form-item label="vhost" path="rabbitSourceVhost">
        <n-input v-model:value="model.rabbitSourceVhost" placeholder="/"/>
      </n-form-item>
      <n-form-item label="username" path="rabbitSourceUsername">
        <n-input v-model:value="model.rabbitSourceUsername" placeholder="guest"/>
      </n-form-item>
      <n-form-item label="password" path="rabbitSourcePassword">
        <n-input v-model:value="model.rabbitSourcePassword" type="password" placeholder="guest"/>
      </n-form-item>
      <n-form-item label="queue" path="rabbitSourceQueue">
        <n-input v-model:value="model.rabbitSourceQueue" placeholder="源队列名"/>
      </n-form-item>
      <n-form-item label="prefetch" path="rabbitSourcePrefetch">
        <n-input-number v-model:value="model.rabbitSourcePrefetch" :min="1" placeholder="50"/>
      </n-form-item>

      <n-divider title-placement="left">Kafka 目标</n-divider>
      <n-form-item label="bootstrap" path="kafkaTargetBootstrap">
        <n-input v-model:value="model.kafkaTargetBootstrap" placeholder="192.168.168.23:9092"/>
      </n-form-item>
      <n-form-item label="topic" path="kafkaTargetTopic">
        <n-input v-model:value="model.kafkaTargetTopic" placeholder="test_topic"/>
      </n-form-item>
      <n-form-item label="acks" path="kafkaTargetAcks">
        <n-input v-model:value="model.kafkaTargetAcks" placeholder="all"/>
      </n-form-item>
    </template>

    <n-divider title-placement="left">运行参数</n-divider>
    <n-form-item label="并发度" path="concurrency">
      <n-input-number v-model:value="model.concurrency" :min="1" placeholder="1"/>
    </n-form-item>
    <n-form-item label="重试次数" path="maxRetries">
      <n-input-number v-model:value="model.maxRetries" :min="0" placeholder="3"/>
    </n-form-item>
    <n-form-item label="退避(ms)" path="retryBackoffMs">
      <n-input-number v-model:value="model.retryBackoffMs" :min="0" placeholder="1000"/>
    </n-form-item>

    <n-space justify="end">
      <n-button @click="submit" type="primary" :loading="submitting">保存</n-button>
    </n-space>
  </n-form>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { useMessage, NForm, NFormItem, NInput, NInputNumber, NSelect, NSpace, NButton, NDivider } from 'naive-ui'

const props = defineProps<{ model:any }>()
const emit = defineEmits<{ (e:'saved'): void }>()
const model = props.model
const message = useMessage()
const submitting = ref(false)

const dirOptions = [
  { label: 'Kafka → RabbitMQ', value: 'KAFKA_TO_RABBIT' },
  { label: 'RabbitMQ → Kafka', value: 'RABBIT_TO_KAFKA' }
]

const offsetOptions = [
  { label: 'latest', value: 'latest' },
  { label: 'earliest', value: 'earliest' }
]

const rules = {
  name: { required: true, message: '请输入名称', trigger: ['blur', 'input'] },
  direction: { required: true, message: '请选择方向', trigger: 'change' }
}

async function submit(){
  submitting.value = true
  try {
    await axios.post('/api/tasks', model)
    message.success('保存成功')
    emit('saved')
  } catch (e:any) {
    message.error(e?.response?.data?.message || e?.message || '保存失败')
    console.error('Submit error:', e)
  } finally {
    submitting.value = false
  }
}
</script>

